<template>
	<view style="min-height: 100vh;">
		<view class="header">
			<view  style="display: flex;justify-content: space-between;padding: 20rpx;">
				<view class="tn-padding" style="background: #fff;width: 48%;font-size: 24rpx;border-radius: 20rpx;">
					<view class="color999">团队订单数量（单）</view>
					<view class="tn-margin-top-sm" style="margin: 25rpx 0;color: #333333;font-size: 34rpx;">
						{{ agents.child_order_count_all || 0 }}
					</view>
					<view class="tn-margin-top-sm" style="display: flex;">
						<view class="color999">
							<view class="">一级订单</view>
							<view class="tn-margin-top-sm" style="color: #333333;">{{ agents.child_order_count_1 || 0 }}
							</view>
						</view>
						<view class="color999" style="margin-left: 50rpx;">
							<view class="">二级订单</view>
							<view class="tn-margin-top-sm" style="color: #333333;">{{ agents.child_order_count_2 || 0 }}
							</view>
						</view>
					</view>
				</view>
				<view class="tn-padding" style="background: #fff;width: 48%;font-size: 24rpx;border-radius: 20rpx;">
					<view class="color999">团队订单金额（元）</view>
					<view class="tn-margin-top-sm" style="margin: 25rpx 0;color: #333333;font-size: 34rpx;">
						{{ agents.child_order_money_all || '0.00' }}
					</view>
					<view class="tn-margin-top-sm" style="display: flex;">
						<view class="color999">
							<view class="">一级订单</view>
							<view class="tn-margin-top-sm" style="color: #333333;">
								{{ agents.child_order_money_1 || '0.00' }}
							</view>
						</view>
						<view class="color999" style="margin-left: 50rpx;">
							<view class="">二级订单</view>
							<view class="tn-margin-top-sm" style="color: #333333;">
								{{ agents.child_order_money_2 || '0.00' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="display: flex;justify-content: space-between;padding: 20rpx;">
				<view class="tn-padding-xs" style="background: #fff;width: 48%;font-size: 24rpx;border-radius: 20rpx;">
					<view class="color999">自购分销订单数量（单）</view>
					<view class="tn-margin-top-sm" style="margin: 15rpx 0;color: #333333;font-size: 34rpx;">
						{{ agents.child_order_count_0 || 0 }}
					</view>
				</view>
				<view class="tn-padding-xs" style="background: #fff;width: 48%;font-size: 24rpx;border-radius: 20rpx;">
					<view class="color999">自购分销订单金额（元）</view>
					<view class="tn-margin-top-sm" style="margin: 15rpx 0;color: #333333;font-size: 34rpx;">
						{{ agents.child_order_count_0 || 0 }}
					</view>

				</view>
			</view>
		</view>
		<tn-tabs :list="list" :isScroll="false" :current="current" name="name" @change="change"></tn-tabs>
		<view class="" style="padding: 10rpx 20rpx;background: #f2f2f2;" v-if="lists.length>0">
			<view class="" style="background: #fff;padding: 30rpx 20rpx;border-radius: 20rpx;margin-top: 10rpx;" v-for="(item,index) in lists" :key="index">
				<view class="" style="display: flex;justify-content: space-between;font-size: 28rpx;">
					<view class="">订单编号：{{item.order.order_sn}}</view>
					<view class="" style="color: #e9b461;font-size: 26rpx;">{{item.order.status_text}}</view>
				</view>
				<view class="" style="display: flex;font-size: 26rpx;color: #999999;margin: 20rpx 0;justify-content: space-between;align-items: center;">
					<view class="" style="display: flex;">
						<view class="" style="color: #666666;">下单人：</view>
						<image :src="info.app.cdnurl+item.buyer.avatar" mode="widthFix" style="width: 40rpx;"></image>
						<view class="">{{item.buyer.nickname}}</view>
					</view>
					<view class="" style="font-size: 24rpx;">2024-10-22 17:08:52</view>
				</view>
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="" style="display: flex;">
						<image :src="info.app.cdnurl+item.order_item.goods_image" mode="widthFix" style="width: 150rpx;"></image>
						<view class="" style="display: flex;flex-direction: column;justify-content: space-between;font-size: 28rpx;margin-left: 10rpx;width: 420rpx;">
							<view class="" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;">{{item.order_item.goods_title}}</view>
							<view class="" style="display: flex;align-items: center;">
								<view class="">￥{{item.order_item.goods_price}}  </view>
								<view class="" style="margin-left: 10rpx;"> x {{ item.order_item.goods_num }}</view>
							</view>
							<view class="" style="display: flex;align-items: center;">
								<view class="">佣金：</view>
								<view class="" style="color: #ff3000;font-size: 36rpx;">
								￥{{item.rewards[0].commission || 0}}
							</view></view>
						</view>
					</view>
					<view class="" style="display: flex;flex-direction: column;justify-content: end;color: #e9b461;font-size: 26rpx;width: 120rpx;text-align: center;">{{item.commission_order_status_text}}</view>
				</view>
			</view>
		</view>
		<view class="" style="position: absolute;transform: translate(-50%,-50%);top: 50%;left: 50%;" v-else>
			<tn-empty mode="data"></tn-empty>
		</view>


	</view>
</template>

<script>
	import {
		getCommissionOrder
	} from '@/apis/index.js'
	export default {
		data() {
			return {
				lists: [],
				list: [{
						name: '全部',
						value: 'all',
					},
					{
						name: '已计入',
						value: 'yes',
					},
					{
						name: '已扣除',
						value: 'back',
					},
					{
						name: '已取消',
						value: 'cancel',
					}
				],
				current: 0,
				type: 'all',
				list_rows: 5,
				page: 1,
			}
		},
		onReachBottom() {
			if (this.page >= this.last_page) {
				return
			} else {
				this.page++
				this.getDataList()
			}
		},
		onLoad() {
			this.getDataList()
		},
		methods: {
			change(e) {
				this.lists = []
				this.page = 1
				this.current = e
				this.type = this.list[e].value
				this.getDataList()
			},
			async getDataList() {
				let res = await getCommissionOrder(this.type, this.list_rows, this.page)
				this.last_page = res.data.last_page
				this.lists = [...this.lists, ...res.data.data]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: url('https://oss.taoding1688.com/static/uniapp/static/commission/withdraw_bg.png') no-repeat, linear-gradient(90deg, #e9b461, rgba(233, 180, 97, 0.6))
	}

	.color999 {
		color: #999;
	}
</style>